<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <style type="text/css">
        td
        {
            font-size: .8em; 
            font-family: verdana;
        }
        tr.alternatingStyle
        {
            background-color: #f5f2e0;
        }
    </style>
    <title>Store Locator Example by Donn Felker - blog.donnfelker.com</title>
    
    <!-- Make sure to put your API key in this script where it says "YourApiKeyGoesHere" --> 
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=YourApiKeyGoesHere" type="text/javascript"></script>


 <script type="text/javascript">
    //<![CDATA[


    function load() 
    {
        /*  HACK: Have to check because IE will throw an error because a child container HTML element 
            contains script code that tries to modify the parent container element of the child container.
            SOURCE: http://support.microsoft.com/default.aspx/kb/927917
            
            This error is thrown if we attempt to remove the load() call from the body onload event and 
            place it into a RegisterStartupScript. The google JS script attempts to modify part of the DOM and this 
            error is then thrown, in turn, shutting down the APP in IE (version 7 at least).
            
            The homeSpatialInfo and ProximityLocations variables are not loaded until the "Go" button is clicked. 
            Therefore, on the first intial load, they are of type "undefined", therefore the load does not occur. 
            After a post back occurs from the "Go" button, these JSON variables are written to the client and the 
            conditional will pass because they are defined and the method call will continue. 
            
            Thiis is VERY HACKY, but it works. Please modify it if you see a better way to handle this and let 
            me know! :) 
        */
        if(window.homeSpatialInfo !== undefined && window.ProximityLocations !== undefined)
        {
          if (GBrowserIsCompatible()) {
            var map = new GMap2(document.getElementById("map"));
            map.addControl(new GSmallMapControl());
            map.addControl(new GMapTypeControl());
            map.setCenter(new GLatLng(homeSpatialInfo.latitude, homeSpatialInfo.longitude), 10);

            // Create a base icon for all of our markers that specifies the
            // shadow, icon dimensions, etc.
            var baseIcon = new GIcon();
            baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
            baseIcon.iconSize = new GSize(20, 34);
            baseIcon.shadowSize = new GSize(37, 34);
            baseIcon.iconAnchor = new GPoint(9, 34);
            baseIcon.infoWindowAnchor = new GPoint(9, 2);
            baseIcon.infoShadowAnchor = new GPoint(18, 25);
            
            // Creates a marker whose info window displays the letter corresponding// to the given index.
            function createMarker(point, name, address, urladdress, locationNumber) {
              var icon = new GIcon(baseIcon);  
              icon.image = "images/markers/marker" + locationNumber + ".png";
              var marker = new GMarker(point, icon);
              GEvent.addListener(marker, "click", function() {
                marker.openInfoWindowHtml(name + '<br>' + address + '<br>' + '<a target="_blank" href="http://maps.google.com/maps?f=q&hl=en&q=from:'+homeSpatialInfo.fromAddress+'+to:'+urladdress+'">Directions</a>');
              });
              return marker;
            }

            // Load all the markers from the JSON ProximityLocations variable
            var bounds = map.getBounds();
            var southWest = bounds.getSouthWest();
            var northEast = bounds.getNorthEast();
            var lngSpan = northEast.lng() - southWest.lng();
            var latSpan = northEast.lat() - southWest.lat();
            for (var i = 0; i < ProximityLocations.locations.length; i++) {
              var point = new GLatLng(ProximityLocations.locations[i].latitude,ProximityLocations.locations[i].longitude);
              map.addOverlay(createMarker(point, ProximityLocations.locations[i].name, ProximityLocations.locations[i].address, ProximityLocations.locations[i].urladdress, i+1));
            }
          }
        }
    }

    //]]>
    </script>

</head>

    
<body  onload="load()" onunload="GUnload()">
    <form id="form1" runat="server">
    <div>
        Store Locator (example)<br />
        <br />
        Find the stores that are within 
        <asp:DropDownList ID="distanceDropDown" runat="server">
            <asp:ListItem>5</asp:ListItem>
            <asp:ListItem>10</asp:ListItem>
            <asp:ListItem>15</asp:ListItem>
            <asp:ListItem>25</asp:ListItem>
            <asp:ListItem>30</asp:ListItem>
            <asp:ListItem>40</asp:ListItem>
            <asp:ListItem>50</asp:ListItem>
        </asp:DropDownList>
        miles of this location (address):
        <asp:TextBox ID="addressTextBox" runat="server" Width="295px">3276 Westchester Ave, Bronx, NY 10461</asp:TextBox>&nbsp;<asp:Button
            ID="startSearchButton" runat="server" OnClick="startSearchButton_Click" Text=" Go " /><br />
        <br />
        
        <table>
            <tr>
                <%-- The Matching results count of "100" is a setting that's in the stored procedure GetNearbyLocations  
                This is because we only have markers (for the map, in images/markers/) that go up to 100. Anything over that would result in a broken image. --%>
                <td><asp:Literal runat="server" ID="totalMatchingTitle" Visible="false">Total Matching Results (up to 100 matches):</asp:Literal> <asp:Literal runat="server" ID="totalResultCount"></asp:Literal></td>
            </tr>
            <tr valign="top">
                <td>
                     <asp:Repeater runat="server" ID="searchResults" OnItemDataBound="searchResults_ItemDataBound">
                        <HeaderTemplate>
                            <table cellpadding="10">
                        </HeaderTemplate>
                        <AlternatingItemTemplate>
                                <tr class="alternatingStyle">
                                    <td>
                                        <b><asp:Literal runat="server" ID="locationNumber"></asp:Literal>. <%# Eval("LocationName")  %></b><br />
                                        <%# Eval("Address")%><br />
                                        <%# Eval("City")%>, <%# Eval("State")%>  <%# Eval("Zip")%>
                                    </td>
                                </tr>
                        </AlternatingItemTemplate>
                        <ItemTemplate>
                                <tr>
                                    <td>
                                        <b><asp:Literal runat="server" ID="locationNumber"></asp:Literal>. <%# Eval("LocationName")  %></b><br />
                                        <%# Eval("Address")%><br />
                                        <%# Eval("City")%>, <%# Eval("State")%>  <%# Eval("Zip")%>
                                    </td>
                                </tr>
                        </ItemTemplate>
                        <FooterTemplate>
                            </table>
                        </FooterTemplate>
                    </asp:Repeater>
                </td>
                <td>
                    <asp:Literal runat="server" ID="clickInstructions" Visible="False">Click on the icon to get directions.</asp:Literal> 
                    <div id="map" style="width: 500px; height: 300px"></div>
                </td>
            </tr>
        </table>
       
    </div>
    </form>
</body>
</html>
